<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid</title>
</head>
<body>
<span>666</span>
<div class="container">
    <div class="item item-1"><p>1</p></div>
    <div class="item item-2"><p>2</p></div>
    <div class="item item-3"><p>3</p></div>
    <div class="item item-4"><p>4</p></div>
    <div class="item item-5"><p>5</p></div>
    <div class="item item-6"><p>6</p></div>
    <div class="item item-7"><p>7</p></div>
    <div class="item item-8"><p>8</p></div>
    <div class="item item-9"><p>9</p></div>
</div>
<span>777</span>
<!--
//minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
//grid-template-columns: 1fr 1fr minmax(100px, 1fr);//minmax(100px, 1fr)表示列宽不小于100px，不大于1fr

//grid-template-columns: repeat(auto-fill, 100px);//auto-fill固定宽带， 每个单元格固定100px
//grid-template-columns: repeat(3,33.33%);//33.33% 33.33% 33.33%;
//grid-template-columns: repeat(3,100px 200px 300px);//100px 200px 300px 100px 200px 300px 100px 200px 300px
-->
</body>
</html>
<style>
*{
    margin: 0;
    padding: 0;
}
.container {
    width: 500px;
    height: 500px;
    background: rgba(0, 0, 0, 0.22);
    display: inline-grid;
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);
    /*
    minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
    grid-template-columns: 80px 1fr 2fr;//第1个单元格固定宽度80px，剩下平均分3（1fr+2fr）个份，第2个单元格宽1/3，第2个宽度2/3
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);//minmax(100px, 1fr)表示列宽不小于100px，不大于1fr
    grid-template-columns: repeat(auto-fill, 100px);//auto-fill固定宽带， 每个单元格固定100px
    grid-template-columns: repeat(3,33.33%);//33.33% 33.33% 33.33%;
    grid-template-columns: repeat(3,100px 200px 300px);//100px 200px 300px 100px 200px 300px 100px 200px 300px
    */

    grid-template-rows: repeat(3,33.33%);
}
.item {
    font-size: 2em;
    text-align: center;
    border: 1px solid #e5e4e9;
    color: #fff;
}

.item-1 {
    background-color: #ef342a;
}

.item-2 {
    background-color: #f68f26;
}

.item-3 {
    background-color: #4ba946;
}

.item-4 {
    background-color: #0376c2;
}

.item-5 {
    background-color: #c077af;
}

.item-6 {
    background-color: #f8d29d;
}

.item-7 {
    background-color: #b5a87f;
}

.item-8 {
    background-color: #d0e4a9;
}

.item-9 {
    background-color: #4dc7ec;
}

.item-6 {
    background-color: #f8d29d;
}

</style>
